Evitando las restricciones de un diseñador de plantillas "espabilado" #evilWeek

Cada año por estas fechas, con la llegada de Halloween, las buenas gentes de Lifehacker lanzan su "evil week". Como dicen en la presentación, la "semana maligna" de Lifehacker no va tanto de cometer fechorías como de "saber cómo cometerlas".

Knowledge is power, and whether you use that power for good or evil depends on you.

Es decir, ellos divulgan determinados conocimientos, pero el cómo los uses depende de ti. Aprender a crackear el password de la wifi puede enseñarte buenas prácticas en seguridad, aunque también puede utilizarse para otros fines menos loables.

Con ése espíritu voy a comentar cómo he conseguido "evitar" las restricciones de una plantilla de pago para Blogger que ofrece un "diseñador espabilado".

Resulta que he estado buscando plantillas para actualizar el aspecto del blog. Ya comenté que tengo algunos problemas de visualización en Chrome, así que me he lanzado a internet a buscar una plantilla gratuita.

Mis condiciones son las siguientes:

• Plantilla gratuita.
• Posibilidad de editar la plantilla (incluídas las CSS, para darle un aspecto diferenciado al blog)
• Responsive, es decir, que se adapte al visor del usuario en función de si la página se visualiza desde una pantalla grande (un equipo de sobremesa), una pantalla media (tablet tipo iPad) o pequeña (smartphone).
• No me importa incluir enlaces a la página del diseñador.

Después de buscar un poco, encuentro unas plantillas interesantes. Sin embargo, algunas de las que me interesan tienen algunos problemas: Por ejemplo, las etiquetas de los artículos aparecen sobre la imagen de la cabecera del post. Si sólo utilizas una etiqueta por plantilla, no pasa nada, pero si utilizas varias -como suelo hacer- la lista de etiquetas puede tapar una parte considerable de la imagen. A mi me gustaría que las etiquetas se mostrara bajo la imagen y no sobre ella.

A través de las herramientas de desarrolladores de Chrome, identifico el elemento y veo que tan sólo tengo que cambiar la propiedad top: 0 por bottom: 0.

Sólo quería cambiar este "top: 0" por "bottom: 0"

Descargo la plantilla, la subo al sitio de pruebas que tengo en Blogger y... ¡no encuentro por ningún lado este fragmento de código!

Después de darle un rato vueltas, voy de nuevo a la página del diseñador y encuentro una nota que dice:

Nótense las faltas de ortografía, la ausencia de puntuación, etc.

Es decir, en la versión gratuita no se incluyen las hojas de estilo.

Sin embargo, el aspecto que presenta la plantilla, una vez subida a Blogger, es el mismo que aparece en la web del diseñador.

Otra limitación que impone el diseñador es que el footer (el pie de página) con el enlace a su web debe estar visible.

Todas estas limitaciones estarían muy bien si el que dice ser el autor del diseño no lo hubiera copypasteado.

Resulta que examinando el código de la web he visto varios enlaces externos a Google Drive y a lo que parecía ser una web que ofrece "temas" (plantillas) para Wordpress. El enlace en cuestión es una imagen de relleno para simular un espacio reservado a anuncios en la plantilla, lo que se llama un placeholder.

Tirando del hilo de la URL de esta imagen he visto que en el tema original -para Wordpress- sí que se incluye una referencia al sitio desde donde se ha adquirido, presuntamente, el tema (resulta que es de pago).

Siguiendo el enlace que figura en el código de esta nueva página web, llego hasta ThemeForest.net, un sitio que vende plantillas (temas, themes o como quieras llamarlos). En particular, la plantilla que me ha llamado la atención. La fecha de publicación de esta plantilla en ThemeForest es el 15 de Agosto del 2013 mientras que en la web del diseñador "espabilado" aparece publicada el 14 de Septiembre de 2013.

Esta es la página de la plantilla original. 

Como puede verse en la captura, el tema original se vende por 35$US, aunque puedes hacerlo tuyo y sólo tuyo (para cobrar por él a tus clientes) por 1750$US.

Así que nuestro amigo el espabilado lo que hizo fue "piratear" el tema, convertirlo en plantilla para Blogger, cambiarle el nombre y cobrar 16.99$US por permitirte editarlo.

Por si a alguien todavía le quedan dudas sobre quién es el autor del tema, en la página de documentación de nuestro espabilado diseñador podemos encontrar:

Me ha llamado poderosamente la atención el identificador id="menu-primario"; en particular, porque nuestro espabilado diseñador pertenece, entre otros, al grupo de Facebook: "orgulloso de ser Pakistaní". Y viendo cómo escribe en inglés, no creo que su castellano sea tampoco especialmente bueno.

Finalmente, si te fijas, bajo el nombre del diseñador de la plantilla en ThemeForest, aparece la bandera Venezolana, como he indicado en el zoom que muestro a continuación:

Siendo venezolano tiene más sentido crear id's en castellano que si eres pakistaní, ¿no?

Analizando el código de la página web

Una de las primeras cosas que destaca es la enorme porción de código ofuscado que incluye la página:

Código ofuscado en la página

Curiosamente, justo debajo de este trozo de código, hay una etiqueta style con los estilos de la página... Sin embargo, eliminando este trozo es fácil descubrir que contiene esas "hojas de estilo" que no proporciona el autor con la "licencia gratuita".

Otras cosas que me han llamado la atención han sido los enlaces a Google Drive. En particular, estos dos al principio de la plantilla:

El primer enlace es la biblioteca de funciones en javascript Snap.js:

En segundo enlace apunta a:

¡Vaya, más código ofuscado!

El problema de nuestro programador espabilado es que existen páginas como http://jsbeautifier.org/ que permiten "desofuscar" el código, con lo que obtenemos:

He tapado la URL de la web del "diseñador espabilado" para no hacerle publicidad, aunque sea mala.

A partir de las cadenas que se almacenan en el array _0x2404 es fácil deducir lo que hace este trozo de código: cuando se carga la página, selecciona un div con id igual al nombre su página. Después, comprueba si es visible; si no lo es, hace una redirección a su URL. Es decir, se fía poco de que los que descarguen su plantilla gratuita dejen el pie de página con el enlace a su web. Supongo que es normal, cuando tú mismo te dedicas a copiar plantillas de otra gente... De hecho, este fragmento está enlazado varias veces -incluso con nombres de fichero diferentes- con la esperanza de que "alguno cuele", supongo.

En cuanto al trozo de código correspondiente a la hoja de estilos, JSBeatifier.org no nos ayuda demasiado:

No parece fácil adivinar qué hace esto

Sin embargo, el navegador sí que sabe cómo interpretarlo, pues el CSS se aplica correctamente a la página web.

Mi solución ha sido aislar el problema: he creado un nuevo documento HTML vacío en el que sólo he copiado el código ofuscado. Abriendo este documento en el navegador:

El código ofuscado resulta en una poco interesante página de color gris oscuro.

¡Ajá! Además del script, ahora aparecen unos cuantos enlaces que apuntan -en Google Drive- a hojas de estilo.

Pulsando sobre cualquiera de esos enlaces se obtiene un pedazo de la hoja de estilos:

Una porción de la hoja de estilos

Repitiendo el proceso para cada uno de los enlaces es posible reconstruir la hoja de estilo final. Juntando todas las porciones en un solo fichero CSS -o en una etiqueta style- podemos usar la plantilla y modificar la hoja de estilo.

Conclusiones

El único mérito que se puede atribuir a nuestro diseñador espabilado es el que haber convertido un tema de Wordpress a Blogger, lo que no es mucho, teniendo en cuenta que es tan sencillo como exportar el tema de Wordpress, pasarlo por la página http://wordpress2blogger.appspot.com/  y después importarlo en Blogger.

A parte de eso, no se hasta qué punto es lícito revender una plantilla que ha diseñado otro, aunque sea para otra plataforma.

Por todo ello he creído conveniente explicar cómo "saltarse" las limitaciones impuestas por éste -y seguro que muchos otros como él- espabilados diseñadores que pretenden cobrar por el trabajo de otros.